<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
     
      /* div{
          width: 100px;
          height: 100px;
          background-color: hotpink;
          position:absolute;
      } */

     </style>
</head>
<body>
    
      <button>开始</button>
      <button>暂停</button>
  
        <div style='width: 100px; height: 100px; background-color: hotpink;position:absolute;left:100px;top:100px'></div>

</body>
</html>
<script>




  
  let divObj = document.getElementsByTagName('div')[0];
  let btnList = document.querySelectorAll('button');
   //保存角度
  let v_deg=0;
  //保存时间id
  let timeId=null;
  //开始
  //btnList[0].onclick=()=>{

    /*
      注意： 在使用 元素节点.style.样式属性值的时候 一定要记得必须行内式中有的属性才能获得值，没有返回为"";
    */

     //获得div元素的left的值
    //  let left_x = divObj.style.left;
    //  console.log(left_x);
    // let w= divObj.style.width;
    // let h= divObj.style.height;
    // let bg =divObj.style.backgroundColor;
    // let left =divObj.style.left;

    // console.log(`${w}---${h}---${bg}---${left}`);

     /**
      *  设置样式属性值的时 不管是行内是 ，内嵌式，外部链接 
      * 统统都是 元素节点.style.样式属性= 值 来修改样式的值
      * 
      */
    //    let w= parseInt(divObj.style.width);

    //    w+=50;

    //    divObj.style.width=w +"px";


    //-------是div进行移动-----------------------------------

  

//   timeId =  window.setInterval(()=>{

//     let left_x = parseInt(divObj.style.left);
//     left_x+=10;

//     //获得旋转的角度
//       divObj.style.transform='rotate('+v_deg+'deg)';

//       v_deg+=40;

//       if(v_deg>=360){
//          v_deg=0;
//       }
//     divObj.style.left=left_x+'px';

//    },50);

//   }
//     //暂停
//     btnList[1].onclick=()=>{
         
//         window.clearInterval(timeId);
//     }


 </script>